<template>
    <div>
        <van-tabs v-model:active="active">
        <van-tab title="标签 1">
      
       <div>
           
        <ul>
            <li v-for="v in mlist" :key="v.id" >
                <router-link :to="{name:'detail',params:{id:v.id}}">
                    <img :src="v.img" alt="">
                    <h3>{{v.nm}}</h3>
                <p> {{v.star}}</p>
                <p>上映时间：{{v.rt}}</p>
                <p>评分：{{v.sc}}</p>
                </router-link>
            </li>
        </ul>
    </div>
    </van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
  <van-tab title="标签 4">内容 4</van-tab>
</van-tabs>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                mlist: []
            }
        },
        mounted () {
            const url=`movieOnInfoList`;
            this.axios.get(url)
            .then((response)=>{
                this.mlist=response.data.movieList
            })
            .catch((error)=>{
                alert(error)
            })

        },
    }
</script>

<style lang="scss" scoped>
     ul{
     background-color: #eee;
        display: flex;
        flex-wrap: wrap;
        li{
            
            width: 42%;
            flex-grow: 1;
            margin: 8px;
            p{
                font-size: 15px;
                color: #000;
            }
            h3{
                color: #000;
            }
            img{
                width: 80%;
            }
        }

    }
</style>